<template>
  <div class="staffApply layout-content">
    <p>
      <a-alert
        type="warning"
        showIcon
        message="员工审核通过默认有效期为3个月，可在员工管理进行更改有效期，有效期过期的员工需重新认证"
      ></a-alert>
    </p>
    <c-table
      :columns="columns"
      :data="data"
      rowKey="userId"
      @onReload="init()"
      :scroll="{ y: '90vh' }"
    >
      <template slot="auditState" slot-scope="{ row }">
        <c-tags :data="[auditState(row.auditState)]"></c-tags>
      </template>
      <template slot="createDate" slot-scope="{ row }">
        <!-- <c-tags
          :data="[$getTime(row.createDate)]"
          :colorGroup="['blue']"
        ></c-tags> -->
        {{ $getTime(row.createDate) }}
      </template>
      <div class="handle" slot="handle" slot-scope="{ row }">
        <template v-if="row.auditState === staff.auditState.pending.value">
          <a-popconfirm
            :title="`是否确认同意${row.userName}的员工申请？`"
            @confirm="audit(row, true)"
          >
            <c-button type="link" v-if="$btn('agree')">同意</c-button>
          </a-popconfirm>
          <a-popconfirm
            :title="`是否确认拒绝${row.userName}的员工申请？`"
            @confirm="audit(row, false)"
          >
            <c-button type="link" v-if="$btn('reject')">拒绝</c-button>
          </a-popconfirm>
        </template>
      </div>
    </c-table>
  </div>
</template>

<script>
import { getUserCompanyAuth, approveUser } from "@/api/staff";
import staff from "@/dict/staff";
import moment from "moment";

const tableColumns = [
  {
    title: "员工姓名",
    dataIndex: "userName",
    key: "userName"
  },
  {
    title: "手机号码",
    dataIndex: "phone",
    key: "phone"
  },
  {
    title: "申请时间",
    // dataIndex: "createDate",
    key: "createDate",
    scopedSlots: { customRender: "createDate" }
  },
  {
    title: "申请状态",
    key: "auditState",
    scopedSlots: { customRender: "auditState" }
  },
  {
    title: "操作",
    key: "handle",
    scopedSlots: { customRender: "handle" }
  }
];

export default {
  data() {
    return {
      columns: tableColumns,
      data: [],
      staff
    };
  },
  methods: {
    moment,
    // 给审核状态添加类名
    auditStateColor(val) {
      let c =
        val === this.staff.auditState.pending.value
          ? "orange"
          : val === this.staff.auditState.pass.value
          ? "green"
          : "red";
      return c;
    },
    auditState(val) {
      let res = {
        label: this.$getEnum(this.staff.auditState, val),
        color: this.auditStateColor(val)
      };
      return res;
    },
    // 审核员工申请
    audit(row, type) {
      approveUser({
        approveUserId: row.userId,
        isPass: type
      }).then(() => {
        this.init();
        this.$message.success("操作成功");
      });
    },
    // 获取员工列表
    init() {
      getUserCompanyAuth().then(res => {
        this.data = res;
      });
    }
  },
  created() {
    this.init();
  }
};
</script>
